<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>三列布局</title>
  <style>
    *{margin:0;padding:0;}
    #herder{
      height:50px;
      background:blue;
    }
    #main{
      width:100%;
      overflow:hidden;
    }
    #main .main-left{
      width:25%;
      height:800px;
      background:red;
      float:left;
    }
    #main .main-center{
      width:50%;
      height:800px;
      background:lightgreen;
      float:left;
    }
    #main .main-right{
      width:25%;
      height:800px;
      background:pink;
      float:right;
    }
    #footer{
      height:50px;
      background:gray;
    }
  </style>
</head>
<body>
<div id="herder">页头</div>
<div id="main">
  <div class="main-left">左列</div>
  <div class="main-center">中间</div>
  <div class="main-right">右列</div>
</div>
<div id="footer">页脚</div>
</body>
</html>
